<template>
    <div ref="container"></div>
</template>
<script>
const echarts = require('echarts/lib/echarts')
require('echarts/lib/chart/pie')
require('echarts/lib/component/tooltip')
export default {
    props: {
        data: {
            type: Array,
            default: () => []
        }
    },
    watch: {
        data (v) {
            this.$nextTick(() => {
                this.drawPieChart(v)
            })
        }
    },
    methods: {
        drawPieChart (data) {
            const dom = this.$refs.container
            if (!dom) return
            if (!this._pieEcharts) {
                this._pieEcharts = echarts.init(dom)
            }
            let option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '人数<br/>{b}：{c}({d}%)'
                },
                series: [
                    {
                        emphasis: {
                            show: true
                        },
                        type: 'pie',
                        clockwise: false,
                        radius: '70%',
                        center: ['50%', '50%'],
                        data: data,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            }
            // 绘制圆形图表
            this._pieEcharts.setOption(option)
        }
    }
}
</script>
